<template>
    <el-container id="login">
        <el-main style="width: 100%;height: 100%;padding: 0">
            <el-container style="width: 100%;height: 100%;position: relative">
                <el-main id="from">
                    <el-form ref="form" :model="data" label-width="0px">
                        <el-form-item>
                            <el-input v-model="data.username"
                                    placeholder="用户名"
                                    prefix-icon="el-icon-user"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="data.password"
                                      placeholder="密码"
                                      prefix-icon="el-icon-key"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                    type="primary"
                                    @click="submit"
                                    style="width: 100%"
                            >登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-main>
        <el-footer id="footer">
            Copyright ©2019 crayon-shin-chan. All rights reserved.
        </el-footer>
    </el-container>
    
</template>

<script lang="ts">

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import {Mutation } from 'vuex-class'

    @Component({})
    export default class Login extends Vue{

        @Mutation("setToken") setToken:(token:string)=>void;

        /* 用户名密码 */
        data:any= {};

        /* 表单提交方法 */
        submit(){
            this.$http.post("/login",{},{params:this.data})
                .then(({data})=>{
                    /* 登录成功存储token */
                    this.setToken(data);
                    this.$message.success({
                        message:"登录成功",
                        duration: 1000,
                        onClose: ()=>{
                            this.$router.push("/");
                        }
                    });

                })
                .catch(error=>{
                    console.log(error)
                })
        }

    }
</script>

<style lang="scss" scoped>

    #login{
        width:100%;
        height: 100%;
        background: {
            image: url("../image/login.jpg");
            repeat: no-repeat;
            position: center;
            size: cover;
        };
    }

    #from{
        position: absolute;
        left: 60%;
        top: 20%;
        width: 15%;
        min-width: 200px;
        height: 250px;
        border:{
            radius: 5px;
        }
        padding:{
            top: 30px;
            left: 20px;
            right: auto;
            bottom: auto;
        }
        background: {
            color: rgba(240,255,255,0.2);
        };
    }

    #footer{
        width: 100%;
        height: 100px;
        position: fixed;
        bottom:0;
        text:{
            align: center;
        }
    }

</style>